<template>
    <div class="global">
        <div style="margin-bottom: 10px;">

            <el-input v-model="queryform.keyword" style="width: 200px;margin-right: 10px;"
                placeholder="请输入关键字查询"></el-input>


            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="success" @click="add()" style="float: right;" plain>新增</el-button>
        </div>

        <div class="table">
            <el-table :data="tableData" stripe>
                <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>

                <el-table-column prop="name" label="实验室名称">

                </el-table-column>
                <el-table-column prop="glyname" label="管理员名称">

                </el-table-column>
                <el-table-column prop="rule" label="实验室规章制度" align="center">
                    <template v-slot="scope">

                        <el-tooltip class="box-item" effect="dark" :content="scope.row.rule" placement="top">
                            <div style="width: 200px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                scope.row.rule
                                }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="实验室地址">
                </el-table-column>
                <el-table-column prop="begintime" label="开始时间">
                </el-table-column>
                <el-table-column prop="endtime" label="结束时间">
                </el-table-column>


                <el-table-column label="操作" align="center" width="300" fixed="right">
                    <template v-slot="scope">
                        <el-button size="mini" type="warning" plain @click="edit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top: 10px;display: flex;justify-content: right;">
                <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                    :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout=" prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="实验室信息" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="管理员" prop="glyid">
                    <el-select v-model="form.glyid" placeholder="请选择实验室管理员">
                        <el-option :label="item.name" :value="item.id" v-for="item in labuserlist"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="规则" prop="rule">
                    <el-input v-model="form.rule" type="textarea" placeholder="请输入规则"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="begintime">
                    <el-time-select v-model="form.begintime" style="width: 240px" start="08:30" step="00:15" end="18:30"
                        placeholder="请选择" />
                </el-form-item>
                <el-form-item label="结束时间" prop="endtime">
                    <el-time-select v-model="form.endtime" style="width: 240px" start="08:30" step="00:15" end="18:30"
                        placeholder="请选择" />
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { onMounted, readonly, ref } from "vue";
import service from "../request/Request";
const keyword = ref("")
const fromVisible = ref(false)
const form = ref({});
const labuserlist = ref([])
const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    glyid: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    rule: [
        { required: true, message: '请输入规则', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入地址', trigger: 'blur' },
    ],
    begintime: [
        { required: true, message: '请选择开始时间', trigger: 'change' },
    ],
    endtime: [
        { required: true, message: '请选择开始时间', trigger: 'change' },
    ],

}
const formRef = ref();
const edit = (row) => {
    form.value = row
    form.value.cover = form.value.cover == null ? '' : form.value.cover
    fromVisible.value = true
}
const save = () => {
    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {

            if (form.value.endtime <= form.value.begintime) {
                ElMessage({
                    type: "warning",
                    message: "结束时间不能小于开始时间"
                })
                return
            }


            let url = form.value.id ? "/lab/edit" : "/lab/add";
            const res = await service.post(url,
                form.value
            )
            console.log(res)
            if (res.code == 200) {
                getlist()
                fromVisible.value = false
                ElMessage({
                    message: res.msg,
                    type: "success"
                })
            }
        }

    })

}
const typedata = ref([])
const avatar = ref("")
const queryform = ref({

    pageNo: 1,
    pageSize: 10,
    keyword: ""
});
const tableData = ref([])
const total = ref(0)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
const add = () => {
    fromVisible.value = true
    form.value = {}
    form.value.avatar = ""
    console.log("1233")
}
onMounted(() => {
    getlist()
    getall()
})
const getall = async () => {
    const res = await service.get("/user/labuser");
    console.log(res)
    labuserlist.value = res.data
}

const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    queryform.value.pageSize = 10;
    queryform.value.type = ""
    getlist()
}
const handleAvatarSuccess = (e) => {
    form.value.avatar = e.data
}
const del = (id) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/lab/delete", { id: id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.post("/lab/list", queryform.value
    )
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>